<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>
		<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">手机号快捷登录/注册</view>
		<form class="cl">
			<view class="t-a">
				<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
				<view class="line"></view>
				<input type="number" name="phone" placeholder="请输入手机号" placeholder-style="" maxlength="11"
					v-model="phone" style="border: none;"/>
			</view>
			<view class="t-a">
				<image src="https://zhoukaiwen.com/img/loginImg/yz.png"></image>
				<view class="line"></view>
				<input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="yzm" style="border: none;"/>
				<view v-if="showText" class="t-c" @click="getCode()">获取验证码</view>
				<view v-else class="t-cd" style="">重新发送({{ second }}s)</view>
			</view>
			<view class="u-flex justify-start align-center u-m-b-40">
				<u-checkbox v-model="checked" shape="circle" active-color="#236EFD" label-size="24"></u-checkbox>
				<p class="color999 u-font-24" @click.stop="checked = !checked">
					已阅读并同意
					<text class="color236" @click.stop="showInfo(1)">《用户协议》</text>
					<text class="color236" @click.stop="showInfo(0)">《隐私政策》</text>
				</p>
			</view>
			<u-button class="loginBtn" @click="login" v-if="this.phone==''&&this.yzm==''" :custom-style='customStyle'>登录
				/ 注册</u-button>
			<u-button class="loginBtns" @click="login" v-else :custom-style='customStyle'>登录 / 注册</u-button>
		</form>
		<u-popup v-model="popupShow" class="u-popup" mode="bottom" border-radius="20" :closeable="true">
			<view class="popup-box">
				<p>{{pubText}}</p>
				<scroll-view scroll-y="true" class="popContent" :scroll-top="0">
					<view v-html="contentPub"></view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: '欢迎使用', //填写logo或者app名称，也可以用：欢迎回来，看您需求
				second: 60, //默认60秒
				showText: true, //判断短信是否发送
				phone: '', //手机号码
				yzm: '', //验证码
				customStyle: {
					borderRadius: '8rpx'
				},
				checked: false,
				popupShow: false,
				pubText: '',
				contentPub: '',
				feedback: '',
				contentPub1: ''
			};
		},
		onLoad() {
			this.getConfigList1()
			this.getConfigList2()
		},
		methods: {
			//当前登录按钮操作
			login() {
				if (!this.phone) return this.$.toast('请输入手机号')
				if (!this.$u.test.mobile(this.phone)) return this.$.toast('请输入正确的手机号')
				if (!this.yzm) return this.$.toast('请输入验证码')
				if (!this.checked) return this.$.toast('请阅读并同意隐私政策和用户协议')
				//....此处省略，这里需要调用后台验证一下验证码是否正确，根据您的需求来
				this.$commonApi.login({
					phone: this.phone,
					code: this.yzm
				}).then(res => {
					this.$.toast(res.msg)
					if (res.code == 200) {
						uni.setStorageSync('lifeData', res.data)
						if (res.data.is_pay_pwd) {
							uni.setStorageSync('is_pay_pwd', 1)
						}
						setTimeout(() => {
							this.openPage(true, 'tab', '/pages/index/index')
						}, 500)
					}
				}).catch(err => {
					console.log(err);
				})
			},
			//获取短信验证码
			getCode() {
				if (this.phone == '') return this.$.toast('请输入手机号')
				if (!this.$u.test.mobile(this.phone)) return this.$.toast('请输入正确的手机号')
				var interval = setInterval(() => {
					this.showText = false;
					var times = this.second - 1;
					this.second = times < 10 ? '0' + times : times; //小于10秒补 0
				}, 1000);
				setTimeout(() => {

					this.second = 60;
					this.showText = true;
					clearInterval(interval);
				}, 60000);
				//这里请求后台获取短信验证码
				this.$commonApi.sendCode({
					phone: this.phone
				}).then(res => {
					this.$.toast(res.msg)
					this.showText = false;
				}).catch(err => {
					console.log(err);
				})
			},
			//打开协议弹框
			showInfo(num){
				this.popupShow=true
				if(num) {
					this.pubText='用户协议'
					this.contentPub = this.feedback
				}else{
					this.pubText='隐私政策'
					this.contentPub = this.contentPub1
				} 
			},
			//用户协议
			getConfigList1(){
				this.$commonApi.platform({
					key: 'user_agreement'
				}).then(res => {
					// return res
					this.feedback = res
				})
			},
			//隐私政策
			getConfigList2(){
				this.$commonApi.platform({
					key: 'privacy_policy'
				}).then(res => {
					this.contentPub1 = res
				})
			},
		}
	};
</script>
<style scoped lang="scss">
	/deep/.u-checkbox__label{
		margin-right: 0 !important;
	}
	.u-popup{
		.popup-box{
			text-align: center;
			padding: 30rpx;
			p{
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				margin-bottom: 30rpx;
				font-size: 32rpx;
			}
			.popContent{
				max-height: 800rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}
	.img-a {
		position: absolute;
		width: 100%;
		top: -150rpx;
		right: 0;
		z-index: -1;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		z-index: -1;
		/* margin-bottom: -200rpx; */
	}

	.t-login {
		width: 650rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
	}



	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 8rpx;
	}


	.t-login .t-a {
		position: relative;

	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		/* border-right: 2rpx solid #dedede; */
		margin-right: 20rpx;
	}

	.t-login .t-a .line {
		width: 2rpx;
		height: 40rpx;
		background-color: #dedede;
		position: absolute;
		top: 28rpx;
		left: 98rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 30rpx 0;
		font-weight: bold;
	}

	.t-login .t-b2 {
		text-align: left;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 120rpx 0;
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		/* background: #236EFD; */
		color: #236EFD;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-cd {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		/* background: #236EFD; */
		color: #999999;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 50%;
	}

	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #999999;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}

	.loginBtn {
		font-size: 28rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		/* border-radius: 50rpx; */
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
		background: rgba(35, 110, 253, 0.5);
	}

	.loginBtns {
		font-size: 28rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		/* border-radius: 50rpx; */
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
		background: rgba(35, 110, 253, 1);
	}
</style>